<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>分页专题</title>
<%include("/common/css.html"){} %>
</head>
<body>
<!-- 浮动菜单 -->
<div class="ui large top fixed hidden menu">
  <div class="ui container">
    <a class="item" href="${ctxPath!}/">首页</a>
    <a class="item" href="${ctxPath!}/vis">数据可视化</a>
    <a class="active item">分页</a>
  </div>
</div>

<!-- 侧边菜单 -->
<div class="ui vertical inverted sidebar menu">
  <a class="item" href="${ctxPath!}/">首页</a>
  <a class="item" href="${ctxPath!}/vis">数据可视化</a>
  <a class="active item">分页</a>
</div>


<!-- 页面内容 -->
<div class="pusher">

	<div class="ui inverted vertical masthead center aligned segment">
		<div class="ui container">
	      <div class="ui large secondary inverted pointing menu">
	        <a class="toc item">
	          <i class="sidebar icon"></i>
	        </a>
	        <a class="item" href="${ctxPath!}/">首页</a>
	        <a class="item" href="${ctxPath!}/vis">数据可视化</a>
    		<a class="active item">分页</a>
	      </div>
	    </div>
	
	    <div class="ui text container">
	      <h1 class="ui inverted header">
	        分页专题
	      </h1>
	    </div>
	</div>
	
	<div class="ui vertical stripe segment">
	    <div class="ui stackable center aligned grid">
	    	<h2 class="ui horizontal divider header">分页专题</h2>
	    	
	    	<div class="fourteen wide column">
	    		<form name="classicForm" action="${ctxPath}/pagination" method="get">
	    			
	    			<table class="ui table">
			    		<thead>
			    			<tr>
			    				<th>剧名</th>
			    				<th>类型</th>
			    				<th>播放量</th>
			    				<th>点赞量</th>
			    				<th>差评量</th>
			    				<th>评分</th>
			    				<th>详情</th>
			    			</tr>
			    		</thead>
			    	<%
			    		for(l in list) {
			    	%>
			    		<tr>
			    			<td><span class="ui teal tag label">${l.videoname}</span></td>
			    			<td>
			    				<%
			    					var types =  strutil.split(l.type, "/");
			    					for(t in types) {
			    				%>
			    					<span class="ui green horizontal label">${t}</span>
			    				<%}%>
			    			</td>
			    			<td>
			    				<%if(strutil.contain(l.plays, "亿")){%>
			    					<div class="ui red horizontal label">${l.plays}</div>
			    				<%} else {%>
			    					<div class="ui orange horizontal label">${l.plays}</div>
			    				<%}%>
			    			</td>
			    			<td>${l.support}</td>
			    			<td>${l.poorrating}</td>
			    			<td>
			    				<div class="ui huge star rating" data-rating="${trunc(l.score,0)}" data-max-rating="10" title="${l.score}"></div>
			    			</td>
			    			<td>
			    				<button type="button" class="ui circular icon button" onclick="App.AjaxModal('${ctxPath}/pagination/view', {id:${l.id}});">
								  <i class="search icon"></i>
								</button>
			    			</td>
			    		</tr>
			    	<%}%>
			    	</table>
			    	
			    	<%include("/common/pagination.html"){}%>
	    		</form>
	    	</div>
	    </div>
	 </div>

	<!-- 页脚 -->
	<div class="ui inverted vertical footer segment">
		<div class="ui container">
			<div class="ui stackable inverted divided equal height stackable grid">
		        <div class="three wide column">
			    	
		        </div>
		        <div class="ten wide column center aligned">
		        	<div class="ui horizontal inverted small divided link list">
			        	<a class="item" href="javascript:;">Copyright 2016-2017</a>
			      	</div>
		        </div>
		        <div class="three wide column">
			        <h4 class="ui inverted header">关于</h4>
			        <div class="ui inverted link list">
			            <a href="http://my.oschina.net/mobinchao/home" class="item">我的开源博客</a>
			            <a href="http://git.oschina.net/mobinchao" class="item">我的git仓库</a>
			        </div>
			    </div>
	        </div>
		</div>
	</div>
</div>
<%include("/common/js.html"){} %>
</body>
</html>